<template>
  <div class="sy_body">
    <div class="title"><span></span>课程大纲</div>
    <div class="chapter_info" v-for="(item,index) in ChapterData">
      <div class="chapter_name">
        <span>第{{ index + 1 }}章</span>{{ item.title }}
      </div>
      <div class="period_info" v-for="(two, num) in item.video">
        <div class="period_top" @click="huoQuVideo(two)">
          <div>
            <span class="period_num">第{{ num + 1 }}讲</span>
            <span v-if="two.isFree===true" class="c_blue">(免费)</span>
            <span>{{ two.title }}</span>
            <!--                            <span> {{two.duration}}分钟</span>-->
          </div>
          <!--                 <a :href="two.accessoryInfoDTOList[0].acUrl" v-if="two.accessoryInfoDTOList && userInfo && two.accessoryInfoDTOList.length && !minVideo">下载课件</a>-->
          <a href="javascript:" @click="noDown(two)" v-if="two.videoOriginalName">下载课件</a>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {

  name: "Syllabus",
  //父传子
  // props: ['ChapterData'],
  props: ['ChapterData', 'TeacherStatus'],
  data() {
    return {
      HuiYuanId: window.sessionStorage.getItem("memberId"),
      // id:this.$route.params.id,
      videoId: '',
      isTitileUpdate: true,
      videoSourceId: '',
      //    订单状态
      playStatus: 0
    }
  },

  created() {
    // alert("222")
    this.getOrderStatus();
  },
  mounted() {
    window.addEventListener('scroll', this.showbtn, true);  // 注册滚动事件
  },
  methods: {
    showbtn() {
      let that = this;
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      that.scrollTop = scrollTop
    },
    //根据课程id和会员id查询支付状态
    getOrderStatus() {
      // alert(this.$route.params.id)
      var that = this;
      this.$http.post("/order/order/getOrderStatus/" + this.$route.params.id + "/" + this.HuiYuanId).then(function (resp) {
        if (resp.data.code === 2000) {
          if (resp.data.data === null) {
            that.playStatus = 0;
          } else {
            that.playStatus = resp.data.data.status;
          }
        }
      })
    },
    //获取当前课时
    huoQuVideo(two) {
      // alert(this.TeacherStatus)
      console.log(two)
      //是否免费
      //  alert(this.playStatus)
      var timer = setInterval(function () {
        let osTop = document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
        this.isTop = true;
        if (osTop === 0) {
          clearInterval(timer);
        }
      }, 10)
      if (this.HuiYuanId != null) {
        this.isFree = two.isFree;
        this.videoId = two.id;
        this.videoSourceId = two.videoSourceId;

        // console.log(two.videoSourceId)
        //回到顶部

        //获取当前视频id，根据课程id，会员id，视频id，将观看课程的相关信息存入学习记录中
        this.$http.post("/core/play-history/insertPlayHistoryByCourseId/" + this.$route.params.id + "/" + this.HuiYuanId + "/" + this.videoId).then(function (resp) {


        })
        // alert(this.videoId)
        //子传父
        this.$emit('FuChuanZi', this.videoSourceId)
        //状态子传父
        this.$emit("UpdateStatus", this.isTitileUpdate);
        //是否免费
        this.$emit("updateIsFree", this.isFree)
        //传videoId
        this.$emit("updateVideoId", this.videoId)
      }


      // alert(this.videoId)
      if (!this.HuiYuanId) {
        this.$msgBox({
          content: '请先登录',
        }).then(res => {
          this.$router.push({
            path: '/qianLogin'
          }); //登录
        }).catch(() => {
        })
        return false;
      }

      if (this.isFree === false && this.playStatus === 0 && this.TeacherStatus === false) {
        this.$msgBox({
          content: '请先进行购买'
        }).then(res => {
        })
        return false;
      }

    },

    //下载课件
    noDown(item) {
      // console.log(item)
      if (!this.HuiYuanId) {
        this.$msgBox({
          content: '登录后才可以下载'
        }).then(res => {
          this.$router.push({
            path: '/qianLogin'
          }); //登录
        }).catch(() => {
        })
        return false;
      }
      if (!item.isFree) {
        this.$msgBox({
          content: '购买后才可以下载',
          isShowCancelBtn: false
        }).then(() => {
          // this.openOrder()
        }).catch(() => {
        })
        return false;
      }
      window.location.href = item.videoOriginalName
    },
    videoPlay(data) {
      // console.log(data)
      // if (!data.videoVid) {
      //     this.$msgBox({
      //         content: '该视频未更新',
      //         isShowCancelBtn: false
      //     }).catch(() => {
      //     })
      //     return false;
      // }
      if (!this.HuiYuanId) {
        this.$msgBox({
          content: '请先登录',
          isShowCancelBtn: false
        }).then(res => {
          this.$router.push({
            path: '/qianLogin'
          }); //登录
        }).catch(() => {
        })
        return false;
      }
    }
  },

}
</script>

<style lang="scss" rel="stylesheet/scss">
.sy_body {
  .title {
    border-left: 3px solid #000;
    padding-left: 12px;
    font-size: 16px;
    color: #000;
    font-weight: 700;
    margin-bottom: 25px;
  }
}

.chapter_info {
  width: 839px;
  margin: 0 auto;
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 30px;
  padding-bottom: 20px;

  &:last-child {
    border: none;
  }

  .chapter_name {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    padding-bottom: 10px;
  }
}

.period_info {
  position: relative;

  a {
    display: inline-block;
    font-size: 12px;
    width: 66px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    color: #999;
    position: absolute;
    right: 0px;
    top: 10px;
    border: 1px solid rgb(153, 153, 153);
    border-radius: 13px;

    &:hover {
      color: rgb(213, 20, 35);
      text-decoration: none;
      border: 1px solid rgb(213, 20, 35);
      cursor: pointer;
    }
  }
}

.period_top {
  width: 627px;
  padding-left: 20px;
  height: 46px;
  line-height: 46px;
  position: relative;
  padding-right: 104px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  .video_time {
    position: absolute;
    right: 0;
  }

  .period_num {
    margin-right: 6px;
  }

  .period_video {
    display: inline-block;
    width: 21px;
    height: 21px;
    position: relative;
    top: 6px;
    margin-right: 10px;
    background: url(../../assets/image/video1.svg) center center;
    background-size: 21px 21px;

    &.no_v {
      background: url(../../assets/image/no_video.svg) no-repeat center center;
    }
  }

  &:hover, &.on {
    cursor: pointer;
    background: rgb(242, 242, 242);
    color: rgb(213, 20, 35);

    .period_video {
      background: url(../../assets/image/video.png) center center;

      &.no_v {
        background: url(../../assets/image/no_video.svg) no-repeat center center;
      }
    }
  }
}
</style>
